<script setup lang="ts">
import {reactive} from 'vue';
import authService from '../http/AuthService';
import {AuthLoginForm} from '../http/Model';
import {useUserStore} from "../stores/UserStore";
import {message} from "ant-design-vue";

interface FormState extends AuthLoginForm {
  remember: boolean
}

const formState: FormState = reactive({
  username: '',
  password: '',
  remember: false
})

const userStore = useUserStore()

const onFinish = () => {
  authService.login(formState).then(res => {
    if (res.data.success) {
      userStore.setToken(res.data.data.tokenValue)
    } else {
      message.error(res.data.message)
    }
  })
}
const onFinishFailed = () => {
  console.log("登录失败");
}
</script>

<template>
  <a-form :model="formState" name="login" aria-autocomplete="off" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }"
          @finish="onFinish" @finishFailed="onFinishFailed">
    <a-form-item label="用户名" name="username" :rules="[{ require: true, message: '请输入用户名!' }]">
      <a-input v-model:value="formState.username"/>
    </a-form-item>
    <a-form-item label="密码" name="password" :rules="[{ require: true, message: '请输入用户名!' }]">
      <a-input-password v-model:value="formState.password"/>
    </a-form-item>
    <a-form-item name="remember" :wrapper-col="{ offset: 8, span: 16 }">
      <a-checkbox v-model:checked="formState.remember">记住我</a-checkbox>
    </a-form-item>
    <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
      <a-button type="primary" html-type="submit">登录</a-button>
    </a-form-item>
  </a-form>
</template>